<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.css" rel="stylesheet">
    <!-- 需要用Jquery吗？Jquery用来查找dom的，vue中不用操作dom -->
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <!-- 在vue中，使用事件绑定机制，为元素绑定处理函数时，在函数名后添加()就能传递参数了 -->
                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label>
                    搜索名称关键字：
                    <input type="text" class="form-control" v-model="keywords">
                </label>
            </div>
        </div>




        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id
                    </th>
                    <th>
                        name
                    </th>
                    <th>Ctime
                    </th>
                    <th>Operation</th>
                </tr>

            </thead>

            <tbody>
                <!-- 之前，v-for中的数据，都是直接从data中的list中直接渲染来的 -->
                <!-- 现在我们自定义了一个search方法，同时把所有的关键字，通过传参的形式，传递给search方法 -->
                <!-- ；再把search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到新数组中，返回 --> 
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var vm = new Vue({
        el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    {
                        id: 1,name: '放逐之刃',ctime: new Date()
                    },
                    {
                        id: 2,name: '无双剑姬',ctime: new Date()
                    }

                ]
            },
            methods: {
                add(){
                    // console.log('ok')
                    //1.获取id和name，直接从data上面获取
                    //2.组织处一个对象
                    //3.把这个对象，调用数组的相关方法，添加到当前data上的list
                    //4.注意在vue中，已经实现了数据的双向绑定，每当我们修改了data中的数组，
                    //vue会默认监听到数据的改动，自动把最新的数据应用到页面上。
                    //5.当我们意识到上面的第四步，我们就已经入门vue了，我们更注意的是model数据的操作
                    // 同时，在操作model数据时，指定业务的逻辑操作
                    var car = {id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(car)
                    this.id=this.name=''
                },
                del(id){
                    // 根据id删除数据
                    //1.如何根据id找到要删除这一项的索引
                    //2.找到索引，直接调用数组的splice方法

                    // this.list.some((item,i)=>{
                    //     if(item.id=id){
                    //         this.list.splice(i,1)
                    //         //在数组的some方法中，找到id就直接终止循环
                    //         return true;
                    //     }
                    // })

                    var index = this.list.findIndex(item=>{
                        if(item.id=id){
                            return true;
                        }
                    })
                    console.log(index)
                    this.list.splice(index,1)
                },
                search(keywords){
                    // var newList = []
                    // this.list.forEach(element => {
                    //     if(element.name.indexOf(keywords) != -1){
                    //         newList.push(element)
                    //     }
                    // });
                    // return newList


                    //注意： forEach some filter findIndex 这些都是数组的新方法
                    //都会对数组中的每一项，进行遍历，执行相关的操作
                        return newList = this.list.filter(item =>{
                        // if(item.name.indexOf(keywords) != -1)
                        // ES6中，为字符串提供了一个新方法，叫做String.prototype,includes('要包含的字符串')
                        // 如果包含返回true ，不包含返回false
                        if(item.name.includes(keywords)){
                            return item
                        }
                    })
                }
            }
        });
    </script>
</body>

</html>